import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../providers/dependencies.dart' hide offlineModeManagerProvider;
import '../../../../core/offline/offline_mode_manager.dart';
import '../../../widgets/platform/adaptive_card.dart';
import '../../../widgets/platform/adaptive_button.dart';

/// 离线状态页面
class OfflineStatusPage extends ConsumerStatefulWidget {
  const OfflineStatusPage({super.key});

  @override
  ConsumerState<OfflineStatusPage> createState() => _OfflineStatusPageState();
}

class _OfflineStatusPageState extends ConsumerState<OfflineStatusPage> {
  @override
  Widget build(BuildContext context) {
    final offlineManager = ref.watch(offlineModeManagerProvider);
    final offlineStatus = offlineManager.currentStatus;

    return Scaffold(
      appBar: AppBar(
        title: const SelectableText('离线状态'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 状态卡片
            _buildStatusCard(offlineStatus),
            const SizedBox(height: 24),

            // 操作按钮
            _buildOperationButtons(offlineManager),
            const SizedBox(height: 24),

            // 离线数据统计
            _buildOfflineDataStats(),
            const SizedBox(height: 24),

            // 使用说明
            _buildUsageInstructions(),
          ],
        ),
      ),
    );
  }

  /// 构建状态卡片
  Widget _buildStatusCard(OfflineModeStatus status) {
    String statusText = '未知';
    Color statusColor = Colors.grey;
    IconData statusIcon = Icons.help;

    switch (status) {
      case OfflineModeStatus.online:
        statusText = '在线模式';
        statusColor = Colors.green;
        statusIcon = Icons.cloud_done;
        break;
      case OfflineModeStatus.offline:
        statusText = '离线模式';
        statusColor = Colors.red;
        statusIcon = Icons.cloud_off;
        break;
      case OfflineModeStatus.syncing:
        statusText = '同步中';
        statusColor = Colors.orange;
        statusIcon = Icons.cloud_sync;
        break;
    }

    return AdaptiveCard(
      child: Column(
        children: [
          Icon(
            statusIcon,
            size: 48,
            color: statusColor,
          ),
          const SizedBox(height: 16),
          SelectableText(
            statusText,
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
              color: statusColor,
            ),
          ),
          const SizedBox(height: 8),
          const SelectableText(
            '当前应用的网络连接状态',
            style: TextStyle(
              fontSize: 16,
              color: Colors.grey,
            ),
          ),
        ],
      ),
    );
  }

  /// 构建操作按钮
  Widget _buildOperationButtons(OfflineModeManager offlineManager) {
    return AdaptiveCard(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SelectableText(
            '操作',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 16),
          Row(
            children: [
              Expanded(
                child: AdaptiveButton(
                  onPressed: () {
                    offlineManager.forceOfflineMode();
                    setState(() {}); // 刷新UI
                  },
                  child: const Text('强制离线'),
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: AdaptiveButton(
                  onPressed: () {
                    offlineManager.forceOnlineMode();
                    setState(() {}); // 刷新UI
                  },
                  child: const Text('强制在线'),
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          AdaptiveButton(
            onPressed: () async {
              final offlineDataManager = ref.read(offlineDataManagerProvider);
              await offlineDataManager.clearAllOperations();
              if (mounted) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('离线操作记录已清空')),
                );
              }
            },
            child: const Text('清空离线操作记录'),
          ),
        ],
      ),
    );
  }

  /// 构建离线数据统计
  Widget _buildOfflineDataStats() {
    return AdaptiveCard(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SelectableText(
            '离线数据统计',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 16),
          const ListTile(
            leading: Icon(Icons.people, color: Colors.blue),
            title: SelectableText('用户数据'),
            trailing: SelectableText('10条记录'),
          ),
          const ListTile(
            leading: Icon(Icons.folder, color: Colors.green),
            title: SelectableText('项目数据'),
            trailing: SelectableText('5条记录'),
          ),
          const ListTile(
            leading: Icon(Icons.task, color: Colors.orange),
            title: SelectableText('任务数据'),
            trailing: SelectableText('50条记录'),
          ),
          const ListTile(
            leading: Icon(Icons.note, color: Colors.purple),
            title: SelectableText('笔记数据'),
            trailing: SelectableText('20条记录'),
          ),
        ],
      ),
    );
  }

  /// 构建使用说明
  Widget _buildUsageInstructions() {
    return AdaptiveCard(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SelectableText(
            '使用说明',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 16),
          const SelectableText(
            '1. 在线模式：应用会实时与服务器同步数据',
          ),
          const SizedBox(height: 8),
          const SelectableText(
            '2. 离线模式：应用使用本地数据，所有操作将被缓存',
          ),
          const SizedBox(height: 8),
          const SelectableText(
            '3. 同步中：应用正在与服务器同步数据',
          ),
          const SizedBox(height: 16),
          const SelectableText(
            '在离线模式下，您可以：',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 8),
          const SelectableText('• 创建、编辑、删除笔记'),
          const SelectableText('• 查看本地缓存的数据'),
          const SelectableText('• 执行其他支持离线的操作'),
          const SizedBox(height: 16),
          const SelectableText(
            '当网络恢复时，离线操作将自动同步到服务器',
            style: TextStyle(
              color: Colors.green,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}
